<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/admin/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>网站管理</el-breadcrumb-item>
      <el-breadcrumb-item>意见管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">
      <el-select @change="getSuggestion" v-model="queryInfo.category" filterable placeholder="选择分类">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <el-table
      :data="suggestion"
      style="width: 100%">
      <el-table-column prop="userId" label="用户ID" width="180"></el-table-column>
      <el-table-column prop="content" label="建议内容" width="180"></el-table-column>
      <el-table-column prop="category" label="建议分类"></el-table-column>
      <el-table-column prop="status" label="状态">
        <template slot-scope="scope">
          <el-tag type="success" v-if="scope.row.status === '新增'">新增</el-tag>
          <el-tag type="info" v-if="scope.row.status === '已处理'">已处理</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作">
       <template slot-scope="scope">
         <!-- 修改按钮 -->
         <el-button type="primary" icon="el-icon-edit" size="mini"
         v-if="scope.row.status === '新增'"
          @click="showEditDialog(scope.row.id)">处理</el-button>
          <!-- 删除按钮 -->
          <el-button
            type="danger"
            icon="el-icon-delete"
            size="mini"
            v-if="scope.row.status === '已处理'"
            @click="removeMemberById(scope.row.id)"
          ></el-button>
       </template>
      </el-table-column>
    </el-table>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      queryInfo: {
        category: '',
        userId: null,
        pagenum: 1,
        pagesize: 10
      },
      // 选择器数据
      options: [{
          value: '',
          label: '全部分类'
        }, {
          value: '网站问题',
          label: '网站问题'
        }, {
          value: '产品建议',
          label: '产品建议'
        }, {
          value: '服务反馈',
          label: '服务反馈'
        }, {
          value: '其他',
          label: '其他'
      }],
      suggestion: []
    }
  },
  created() {
    this.getSuggestion()
  },
  methods: {
    async getSuggestion() {
      const { data: res } = await this.$axios.get('/message/search', { params: this.queryInfo })
      console.log(res)
      this.suggestion = res.data.message
    },
    async showEditDialog(id) {
      const { data: res } = await this.$axios.put('/message/update/' + id, {
        status: '已处理'
      })
      console.log(res)
      if (res.code !== 200) {
        return this.$message.error('处理失败')
      }
      this.$message.success('已处理')
      this.getSuggestion()
    },
    async removeMemberById(id) {
      // 弹框提示用户是否删除
      const confirmResult = await this.$confirm('此操作将永久删除该建议，是否继续？', '删除意见', {
          confirmButtonText: '',
          cancelButtonText: '',
          type: 'warning'
      }).catch(err => err)
          if (confirmResult !== 'confirm') {
              return this.$message.info('已取消删除 ')
          }
          const { data: res } = await this.$axios.delete('/message/delete/' + id)
          if (res.code !== 200) {
              return this.$message.error('删除失败！ ')
          }
          this.$message.success('删除意见成功！ ')
          this.getSuggestion()
    }
  }
}
</script>

<style>

</style>
